<template>
    <div v-loading="loading">
        <!-- 添加代理 -->
        <el-dialog :title="type == 'create' ? '添加代理' : '修改代理'" :visible.sync="visible" width="800px">
            <el-input clearable placeholder="请输入昵称" size="small" style="width: 200px;" v-model="parameter.name"></el-input>
            <el-button @click="getUserList()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>

            <el-table :data="userList" max-height="550px" size="small" style="width: 100%" v-if="userList">
                <el-table-column label prop="suggest_id" v-if="visible">
                    <template slot-scope="scope">
                        <el-radio :label="scope.row.id" @change="handleCheckedCitiesChange(scope.row)"
                            v-model="checked"></el-radio>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
                <el-table-column label="昵称" prop="name"></el-table-column>
                <el-table-column label="头像" prop="avatar">
                    <template slot-scope="scope">
                        <el-image :preview-src-list="toArray(scope.row.avatar)" :src="scope.row.avatar" class="border"
                            style="width: 50px; height: 50px"></el-image>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-left: 40%;margin-top: 50px;">
                <el-pagination :total="totals" @current-change="currentChange" @next-click="nextClick"
                    @prev-click="prevClick" @size-change="sizeChange" layout="prev, pager, next"></el-pagination>
            </div>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeSelectBox">取 消</el-button>
                <el-button @click="selectSubmit" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改代理信息 -->
        <el-dialog :visible.sync="updateFun" title="修改代理信息" width="800px">
            <el-form label-position="left" label-width="150px">
                <el-form-item label="用户名">
                    <el-input placeholder="请输入登录账号用户名" style="width: 500px" v-model="updateForm.username"></el-input>
                </el-form-item>

                <el-form-item label="登录密码">
                    <el-input placeholder="请输入登录密码" show-password style="width: 500px"
                        v-model="updateForm.password"></el-input>
                </el-form-item>

                <el-form-item label="头像">
                    <medium v-model="updateForm.avatar"></medium>
                </el-form-item>

                <el-form-item label="保证金 ">
                    <el-input placeholder="请输入保证金 " style="width: 500px" v-model="updateForm.deposit"></el-input>
                </el-form-item>

                <el-form-item label="付费直播间抽佣比例(%)">
                    <el-input placeholder="请输入付费直播间抽佣比例" style="width: 500px" v-model="updateForm.live_fee_rate"></el-input>
                </el-form-item>

                <el-form-item label="直播间礼物抽佣比例(%)">
                    <el-input placeholder="请输入直播间礼物抽佣比例" style="width: 500px"
                        v-model="updateForm.live_gift_rate"></el-input>
                </el-form-item>

                <el-form-item label="长视频付费抽佣比例(%)">
                    <el-input placeholder="请输入长视频付费抽佣比例" style="width: 500px" v-model="updateForm.long_rate"></el-input>
                </el-form-item>

                <el-form-item label="短视频付费抽佣比例(%)">
                    <el-input placeholder="请输入短视频付费抽佣比例" style="width: 500px" v-model="updateForm.short_rate"></el-input>
                </el-form-item>

                <el-form-item label="打赏作品时抽佣比例(%)">
                    <el-input placeholder="请输入打赏作品时抽佣比例" style="width: 500px" v-model="updateForm.tipping_rate"></el-input>
                </el-form-item>

                <el-form-item label="1V1密聊抽佣比例(%)">
                    <el-input placeholder="请输入1V1密聊抽佣比例" style="width: 500px"
                        v-model="updateForm.one_by_one_rate"></el-input>
                </el-form-item>

                <el-form-item label="同城空降抽佣比例(%)">
                    <el-input placeholder="请输入同城空降抽佣比例" style="width: 500px" v-model="updateForm.same_city_rate"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="updateBox">取 消</el-button>
                <el-button @click="updateSubmit" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="type == 'create' ? '添加代理' : '修改代理'" :visible.sync="formShow" width="800px">
            <el-form :model="form">
                <el-form-item label="账号">
                    <el-input placeholder="请输入设置登录账号" style="width: 500px" v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                    <el-input placeholder="请输入手机号" style="width: 500px" v-model="form.mobile"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" show-password style="width:500px" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item label="确认密码">
                    <el-input placeholder="请确认密码" show-password style="width:500px" v-model="confirmPassword"></el-input>
                </el-form-item>

                <el-form-item label="昵称">
                    <el-input placeholder="请输入昵称" style="width: 500px" v-model="form.nickname"></el-input>
                </el-form-item>

                <el-form-item label="保证金">
                    <el-input placeholder="请输入保证金" style="width: 500px" v-model="form.deposit"></el-input>
                </el-form-item>

                <el-form-item label="付费直播间抽佣比例(%)">
                    <el-input placeholder="请输入付费直播间抽佣比例" style="width: 500px" v-model="form.live_fee_rate"></el-input>
                </el-form-item>

                <el-form-item label="直播间礼物抽佣比例(%)">
                    <el-input placeholder="请输入直播间礼物抽佣比例" style="width: 500px" v-model="form.live_gift_rate"></el-input>
                </el-form-item>

                <el-form-item label="长视频付费抽佣比例(%)">
                    <el-input placeholder="请输入长视频付费抽佣比例" style="width: 500px" v-model="form.long_rate"></el-input>
                </el-form-item>

                <el-form-item label="短视频付费抽佣比例(%)">
                    <el-input placeholder="请输入短视频付费抽佣比例" style="width: 500px" v-model="form.short_rate"></el-input>
                </el-form-item>

                <el-form-item label="打赏作品时抽佣比例(%)">
                    <el-input placeholder="请输入打赏作品时抽佣比例" style="width: 500px" v-model="form.tipping_rate"></el-input>
                </el-form-item>

                <el-form-item label="1V1密聊抽佣比例(%)">
                    <el-input placeholder="请输入1V1密聊抽佣比例" style="width: 500px" v-model="form.one_by_one_rate"></el-input>
                </el-form-item>

                <el-form-item label="同城空降抽佣比例(%)">
                    <el-input placeholder="请输入同城空降抽佣比例" style="width: 500px" v-model="form.same_city_rate"></el-input>
                </el-form-item>
            </el-form>

            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button :loading="submitComplete" @click="submit" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <el-card body-style="padding:10px" class="box-card">
            <div>
                <el-input class="marginBottom" clearable placeholder="请输入用户名" size="small" style="width: 200px;"
                    v-model="query.username"></el-input>
                <el-input class="marginBottom" clearable placeholder="请输入昵称" size="small" style="width: 200px;"
                    v-model="query.nickname"></el-input>
                <el-input class="marginBottom" clearable placeholder="请输入代理ID" size="small" style="width: 200px;"
                    v-model="query.parent_id"></el-input>
                <el-input class="marginBottom" clearable placeholder="请输入上级代理" size="small" style="width: 200px;"
                    v-model="query.parent"></el-input>
                <el-input class="marginBottom" clearable placeholder="请输入身份证号" size="small" style="width: 200px;"
                    v-model="query.cert_no"></el-input>
                <el-input class="marginBottom" clearable placeholder="请输入真实姓名" size="small" style="width: 200px;"
                    v-model="query.cert_name"></el-input>
                <el-input class="marginBottom" clearable placeholder="请输入手机号" size="small" style="width: 200px;"
                    v-model="query.mobile"></el-input>
                <el-select placeholder="请选择代理等级" v-model="query.level">
                    <el-option :key="item.value" :label="item.label" :value="item.value"
                        v-for="item in options"></el-option>
                </el-select>
                <el-button @click="page=1;init()" size="small" style="margin-left: 0px;" type="primary">搜索</el-button>
                <el-button @click="toForm()" size="small" type="success" v-permission="['ADMIN', 'AGENT_ADD']">添加</el-button>
                <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
            </div>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="640px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>

                <el-table-column label="登录账号" prop="username"></el-table-column>

                <el-table-column label="头像" prop="avatar">
                    <template slot-scope="scope">
                        <el-image :preview-src-list="toArray(scope.row.avatar)" :src="scope.row.avatar" class="border"
                            style="width: 50px; height: 50px"></el-image>
                    </template>
                </el-table-column>

                <el-table-column label="手机号" prop="mobile"></el-table-column>

                <el-table-column label="昵称" prop="nickname"></el-table-column>

                <el-table-column label="代理级别" prop="level">
                    <template slot-scope="scope">
                        <div v-if="scope.row.level == 1"> 一级代理 </div>
                        <div v-else-if="scope.row.level == 2"> 二级代理 </div>
                        <div v-else-if="scope.row.level == 3"> 三级代理 </div>
                    </template>
                </el-table-column>
                <el-table-column label="代理收益" prop="profits_sum_balance"></el-table-column>
                <el-table-column label="下级收益" prop="childrens_profits_balance"></el-table-column>
                <el-table-column label="平台收益" prop="profits_sum_platform_balance"></el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button @click="toDetails(scope.row)" size="mini" type="success"
                            style="padding: 10px">详情</el-button>
                        <el-button @click="update(scope.row)" size="mini" style="padding: 10px;margin-left: 3px;"
                            type="primary">修改</el-button>
                        <el-popconfirm @confirm="disableFun(scope.row.id)" title="这是用户确定要禁用吗？"
                            v-if="scope.row.disable == 0">
                            <el-button size="mini" slot="reference" style="padding: 10px;margin-left: 3px;"
                                type="danger">禁用</el-button>
                        </el-popconfirm>
                        <el-button @click="disableFun(scope.row.id)" size="mini" style="padding: 10px;margin-left: 3px;"
                        type="success" v-else>启用</el-button>-->
                        <el-dropdown>
                            <el-button type="primary">
                                更多菜单
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-permission="['ADMIN', 'AGENT_DETAILS']">
                                    <el-button @click="toDetails(scope.row)" size="mini" style="padding: 10px"
                                        type="success">详情</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-permission="['ADMIN', 'AGENT_UPDATE']">
                                    <el-button @click="update(scope.row)" size="mini"
                                        style="padding: 10px;margin-top: 10px;" type="primary">修改</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-permission="['ADMIN', 'AGENT_DISABLE']">
                                    <el-popconfirm @confirm="reasonShowFun(scope.row.id)" title="这是用户确定要禁用吗？"
                                        v-if="scope.row.disable == 0">
                                        <el-button size="mini" slot="reference" style="padding: 10px;margin-top: 10px;"
                                            type="danger">禁用</el-button>
                                    </el-popconfirm>
                                    <el-button @click="disableFun(scope.row.id)" size="mini"
                                        style="padding: 10px;margin-top: 10px;" type="success" v-else>启用</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>

        <!-- 详情 -->
        <el-drawer :visible.sync="drawer" :with-header="false" title="我是标题">
            <el-descriptions :border="true" :column="2" class="margin-top" style="text-align: center;" title>
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">用户名</template>
                    <!-- {{ agentDetails.username }} -->
                    <div style="display: flex;align-items: center;">
                        <el-avatar :src="agentDetails.avatar" size="medium" style="margin-right: 10px"></el-avatar>
                        <div style="font-size: 14px;">{{ agentDetails.username }}</div>
                    </div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">昵称</template>
                    {{ agentDetails.nickname }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">手机号</template>
                    {{ agentDetails.mobile }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">密码</template>
                    {{ agentDetails.password }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">关联用户ID</template>
                    {{ agentDetails.with_user }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">收益金币</template>
                    {{ agentDetails.balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">代理币</template>
                    {{ agentDetails.agent_balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">代理级别</template>
                    <div v-if="agentDetails.level == 1"> 一级代理 </div>
                    <div v-else-if="agentDetails.level == 2"> 二级代理 </div>
                    <div v-else-if="agentDetails.level == 3"> 三级代理 </div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">上级代理</template>
                    <div v-if="agentDetails.parent">
                        <div class='flex align-center' style="cursor: pointer;"
                            @click="getAgentProfit(agentDetails.parent.id)">
                            <!-- <el-avatar :size="36" :src="userInfo.avatar" style="margin-right: 10px;text-align: center;"></el-avatar> -->
                            <el-image style="width: 36px; height: 36px;border-radius:36px"
                                :src="agentDetails.parent.avatar"></el-image>
                            <div class="pl-10">
                                {{ agentDetails.parent.username }}
                            </div>
                        </div>
                    </div>
                    <div v-if="agentDetails.parent_id == 0">无</div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">保证金</template>
                    {{ agentDetails.deposit }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">付费直播间抽佣比例</template>
                    {{ agentDetails.live_fee_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">直播间礼物抽佣比例</template>
                    {{ agentDetails.live_gift_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">长视频付费抽佣比例</template>
                    {{ agentDetails.long_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">短视频付费抽佣比例</template>
                    {{ agentDetails.short_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">打赏作品时抽佣比例</template>
                    {{ agentDetails.tipping_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">1V1密聊抽佣比例</template>
                    {{ agentDetails.one_by_one_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">同城空降抽佣比例</template>
                    {{ agentDetails.same_city_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">实名姓名</template>
                    {{ agentDetails.cert_name }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">实名身份证号码</template>
                    {{ agentDetails.cert_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">是否实名认证成功</template>
                    {{ agentDetails.authentication == 0 ? "否" : "是" }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">
                        记住token
                    </template>
                    {{ agentDetails.cert_no }}
                </el-descriptions-item>-->

                <el-descriptions-item>
                    <template slot="label">登录IP</template>
                    {{ agentDetails.login_ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">登录时间</template>
                    {{ agentDetails.login_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">创建时间</template>
                    {{ agentDetails.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">修改时间</template>
                    {{ agentDetails.updated_at }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">
                        删除时间
                    </template>
                    {{ agentDetails.cert_no }}
                </el-descriptions-item>-->
            </el-descriptions>

            <!-- 返利明细 -->
            <div style="padding: 10px;">
                <h4>返利明细</h4>
                <el-table :data="agentProfitList" max-height="340px" size="small" style="width: 100%">
                    <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
                    <el-table-column label="下级用户" prop="name">
                        <template slot-scope="scope">
                            <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.user_info" :modalShow="false"
                                v-if="scope.row.user_id"></UserInfo>
                        </template>
                    </el-table-column>
                    <el-table-column label="打赏金额" prop="user_expend"></el-table-column>
                    <el-table-column label="返利金额" prop="balance"></el-table-column>
                    <el-table-column label="描述" prop="desc">
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-left: 40%;margin-top: 50px;">
                    <el-pagination :total="agentTotals" @current-change="currentChangeAgent" @next-click="nextClick"
                        @prev-click="prevClick" @size-change="sizeChange" layout="prev, pager, next"></el-pagination>
                </div>
            </div>
        </el-drawer>

        <agentInfo  ref="agentDetails"></agentInfo>

        <!-- 禁用 -->
        <el-dialog :visible.sync="reasonShow" title="禁用原因" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="禁用原因">
                    <el-input placeholder="请输入禁用原因" style="width: 500px" v-model="reasonForm.disable_reason" maxlength="254"
                        show-word-limit type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBoxdisableFun">取 消</el-button>
                <el-button @click="disableDLFun" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import initData from '@/mixins/index'
import medium from '@/components/medium/index'
import agentInfo from '@/components/agentInfo/index'
export default {
    name:"system-agent-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium,
        agentInfo
    },
    data() {
        return {
            query: {
                username: '',
                nickname: '',
                mobile: '',
                level: '', //代理登记{1,2,3}前端可写死
                parent_id: '', //0 为查寻一级代理
                parent: '', //搜上级代理的参数
                cert_name: '',
                cert_no: '',
            },
            form: {
                username: '',
                with_user: '',
                deposit: '',
                live_fee_rate: '',
                live_gift_rate: '',
                long_rate: '',
                short_rate: '',
                tipping_rate: '',
                one_by_one_rate: '',
                same_city_rate: '',
            },
            totals: 0,
            submitComplete: false,
            options: [
                {
                    label: '一级代理',
                    value: 1,
                },
                {
                    label: '二级代理',
                    value: 2,
                },
                {
                    label: '三级代理',
                    value: 3,
                },
            ],

            updateForm: {
                username: '',
                password: '',
                avatar: '',
                deposit: '',
                live_fee_rate: '',
                live_gift_rate: '',
                long_rate: '',
                short_rate: '',
                tipping_rate: '',
                one_by_one_rate: '',
                same_city_rate: '',
            },
            id: '',
            confirmPassword: '',
            visible: false,
            loading: false,
            data: [],
            type: 'create',
            agentDetails: {},
            drawer: false,
            userList: [],
            checked: 1,
            parameter: {
                page: 1,
                size: 10,
                without_agent: 1,
                name: ""
            },
            formShow: false,
            updateFun: false,
            agentProfitQuery: {
                page: 1,
                size: 10
            },
            agentProfitList: [],
            agentTotals: 0,
            submitComplete: false,
            reasonShow: false,
            reasonForm: {
                disable_reason: "", //理由
                disable: null
            },
            disableID: '',
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
        this.getUserList()
    },
    methods: {
        beforeInit() {
            this.url = '/agent/index'
            this.init() //重新请求数据
        },

        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        reasonShowFun(id) {
            this.reasonForm.disable = 1
            this.reasonShow = true
            this.disableID = id
        },

        initReasonForm() {
            this.reasonForm = {
                disable_reason: "", //理由
                disable: null
            }
        },


        //禁用
        disableDLFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            this.$request.put('/agent/update_disable/' + that.disableID, that.reasonForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.reasonShow = false
                that.initReasonForm()
                this.init() //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },

        closeBoxdisableFun() {
            this.reasonShow = false
            that.initReasonForm()
        },


        getUserList() {
            let that = this
            this.$request.get('/user/index', this.parameter).then((res) => {
                this.userList = res.items
                // this.form.with_user = res.items[0].id
                console.log('res2222', res)
                this.totals = res.page.total
            })
        },

        disableFun(id) {
            let that = this
            this.$request.put('/agent/update_disable/' + id, { disable: 0 }).then((res) => {
                this.$message.success('操作成功')
                this.init() //重新请求数据
            })
        },

        getAgentProfit(id) {
            let that = this
            that.agentProfitQuery.agent_id = id
            this.$request.get('/agent-profit/index', that.agentProfitQuery).then((res) => {
                console.log('返利明细', res)
                that.agentProfitList = res.items
                that.agentTotals = res.page.total

            })
        },

        closeSelectBox() {
            this.visible = false
        },

        selectSubmit() {
            if (!this.form.with_user) {
                this.$message.warning('请选择用户')
                return
            }
            this.formShow = true
            this.visible = false
        },



        sizeChange(val) {
            console.log(val)
        },

        currentChange(val) {
            console.log('currentChange', val)
            this.parameter.page = val
            this.getUserList()
        },
        prevClick(val) {
            console.log(val)
        },

        nextClick(val) {
            console.log(val)
        },

        currentChangeAgent(val) {
            console.log('currentChange', val)
            this.agentProfitQuery.page = val
            this.getAgentProfit()
        },

        handleCheckedCitiesChange(res) {
            console.log(res)
            this.form.username = res.name
            this.form.with_user = res.id
        },

        del(id) {
            this.$request.del('/label/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init() //重新请求数据
            })
        },

        toDetails(res) {
            this.agentDetails = res
            // this.drawer = true
            // this.getAgentProfit(res.id)
            // 在父组件中
            if (this.$refs.agentDetails) {
                this.$refs.agentDetails.getAgentDetails(res.id)
            }

        },

        update(res) {
            this.updateForm = res
            this.updateFun = true
            this.id = res.id
        },

        updateBox() {
            ; (this.updateFun = false),
                (this.updateForm = {
                    username: '',
                    password: '',
                    avatar: '',
                    deposit: '',
                    live_fee_rate: '',
                    live_gift_rate: '',
                    long_rate: '',
                    short_rate: '',
                    tipping_rate: '',
                    one_by_one_rate: '',
                    same_city_rate: '',
                })
            this.init() //重新请求数据
        },
        updateSubmit() {
            this.$request.put('/agent/update/' + this.id, this.updateForm).then((res) => {
                console.log(res)
                this.$message({
                    message: '修改成功',
                    type: 'success',
                })
                this.updateBox()
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.form = form
            } else {
                this.getUserList()
                this.type = 'create'
                this.form = {
                    username: '',
                    with_user: '',
                    deposit: '',
                    live_fee_rate: '',
                    live_gift_rate: '',
                    long_rate: '',
                    short_rate: '',
                    tipping_rate: '',
                    one_by_one_rate: '',
                    same_city_rate: '',
                }
            }
        },

        closeBox() {
            this.type = 'create'
            this.formShow = false
            this.form = {
                username: '',
                with_user: '',
                deposit: '',
                live_fee_rate: '',
                live_gift_rate: '',
                long_rate: '',
                short_rate: '',
                tipping_rate: '',
                one_by_one_rate: '',
                same_city_rate: '',
            }
        },

        //提交
        submit() {
            if (this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.username && this.form.with_user && this.form.deposit && this.form.live_fee_rate && this.form.live_gift_rate && this.form.long_rate && this.form.short_rate && this.form.tipping_rate && this.form.one_by_one_rate && this.form.same_city_rate)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning',
                })
                this.submitComplete = false
                return
            }

            if (this.form.live_fee_rate > 100 || this.form.live_gift_rate > 100 || this.form.long_rate > 100 || this.form.short_rate > 100 || this.form.tipping_rate > 100 || this.form.one_by_one_rate > 100 || this.form.same_city_rate > 100) {
                this.$message({
                    message: '抽佣比例最高是100',
                    type: 'warning',
                })
                this.submitComplete = false
                return
            }

            if (this.type == 'create') {
                this.$request.post('/agent/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })
                    this.submitComplete = false
                    this.init() //重新请求数据
                    this.closeBox()
                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put('/agent/update/' + this.form.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.submitComplete = false
                    this.init() //重新请求数据
                    this.closeBox()

                }).catch((error) => {
                    this.submitComplete = false
                });
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>